import React from 'react'

class Hello extends React.Component{

    constructor(props){
      super(props)
      this.state={
        flag:true
      }
    }
 
  change(){
    this.setState({flag:!this.state.flag})
    console.log(this.state.flag);
  }
  render(){
    const {flag}=this.state;
    return ( 
      <>
      {/*  */}
      <div style={{color:'red',fontSize:'20px',display:flag ? 'block' :'none'}}>我是一个受display控制 的</div>
      <div>Hello{this.props.toWhat}</div>
      <button onClick={this.change.bind(this)}>打印this</button>
      </>
    )
  }
}

class MyComponent extends React.Component{
  constructor(props){
    super(props)
    this.state={
      count:0
    }
    this.handleClick=this.handleClick.bind(this)
  }
  shouldComponentUpdate(nextProps,nextState){
    //只能检查到对象或者数组的引用变化，而无法检测到它们的深层内容变化
    if(nextProps!==this.props || nextState !== this.state){
      return true
    }
    return false
  }

  handleClick(){
    this.setState({count:this.state.count+1})
  }
   render(){
    return(
      <div>
        <h1>计时器</h1>
        <p>当前计数：{this.state.count}</p>
        <button onClick={this.handleClick}>点我加1</button>
        <Hello toWhat='漂亮惠妹'/>
      </div>
    )
   }
}
export default MyComponent